<!--
* description: 采购供应商确认-明细
-->
<template>
  <section class="detail">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="明细信息"
      :append-to-body="true"
      :visible.sync="showDialog"
      width="1000px"
      @close="close"
    >
      <dialogHeader
        slot="title"
        title="明细信息"
        :styleType="$store.state.app.dialogType"
      ></dialogHeader>
      <div>
        <el-row :gutter="34" style="margin-bottom:5px;">
          <el-col :span="12">
            <div class="calendar">
              <el-form ref="form">
                <el-form-item label="预计交货时间">
                  <el-date-picker
                    v-model="calendar"
                    :picker-options="pickerOptions0"
                    type="date"
                    placeholder="选择日期"
                    @change="calendarChange"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="dialogTitle">
              <span class="dialogTitleButton">
                <el-button class="el-icon-check" @click="save"
                  >备件发货</el-button
                >
              </span>
              <!-- 确认 -->
              <span class="determineButton">
                <el-button class="el-icon-check" @click="confirm"
                  >确认</el-button
                >
              </span>
            

            </div>
          </el-col>
        </el-row>
     
       
        <el-row :gutter="26">
          <el-table
          
            :data="tableData"
            style="width: 100%"
            height="400"
            border
            v-loading="listLoading"
            @selection-change="onCheckSelectChange"
            class="crmonepage-hello"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" width="60" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="采购单号"
              prop="PURCHASE_CODE"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              label="采购单行号"
              prop="PURCHASE_LINE_CODE"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              label="备件编号"
              prop="PART_NO"
              width="120"
              align="center"
            ></el-table-column>
              <el-table-column
              label="零件编号"
              prop="COMPONENTS_NO"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              label="备件名称"
              prop="PART_NAME"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              label="采购数量"
              prop="PURCHASE_QTY"
              width="120"
              align="center"
            ></el-table-column>
            <!-- <el-table-column
              label="采购价格"
              prop="PURCHASE_PRICE"
              width="120"
              align="center"
            ></el-table-column> -->

            <!-- <el-table-column
              label="采购SNP"
              prop="SNP_IN"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              label="销售SNP"
              prop="SNP_OUT"
              width="120"
              align="center"
            ></el-table-column> -->
             <el-table-column label="预计交货时间" width="100%" align="center">
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.DELIVERY_TIME"
                   :picker-options="pickerOptions1"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </template>
            </el-table-column>

            <el-table-column
              label="要求到货时间"
              prop="RA_TIME"
              width="120"
              align="center"
            ></el-table-column>

            <el-table-column
              label="已发货数量"
              prop="ARRIVAL_QTY"
              width="120"
              align="center"
            >
            </el-table-column>
          
            <el-table-column
             label="发货数量+" width="120" align="center">
              <template slot-scope="scope">
                <el-input
                  v-if="
                    (scope.row.SHIPMENTS_STATUS == '00' &&
                      rowData.AUDIT_STATUS == '40') ||
                      (scope.row.SHIPMENTS_STATUS == '10' &&
                        rowData.AUDIT_STATUS == '40')
                  "
                  v-model="scope.row.ARRIVAL_QTY_NOW"
                  type="text"
                  @input="numChange(scope)"
                  style="width:100%;"
                  class="tableTemplate"
                />
                <span v-else>{{ scope.row.ARRIVAL_QTY_NOW }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="发货状态"
              prop="SHIPMENTS_STATUS_NAME"
              width="120"
              align="center"
            ></el-table-column>
              <el-table-column
              label="订单状态"
              prop="ORDER_STATUS_NAME"
              width="120"
              align="center"
            ></el-table-column>

            <!-- <el-table-column label="发货状态" width="120" align="center">
              <template slot-scope="scope">
                <el-input
                  v-if="!scope.row.SHIPMENTS_STATUS_NAME ? true : false"
                  v-model="scope.row.ARRIVAL_QTY_NOW"
                  type="text"
                    prop="SHIPMENTS_STATUS_NAME"
                  @input="numChange(scope)"

                  class="tableTemplate"
                />
                <span v-else>{{ scope.row.ARRIVAL_QTY_NOW }}</span>
              </template>
            </el-table-column> -->
          </el-table>
          <el-pagination
            ref="oneTable.pageArea"
            background
            :page-sizes="this.$config.pageSizeArray"
            :page-size="this.$config.defaultPageSize"
            hide-on-single-page
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, jumper, sizes, ->, total"
            :total="pageTotal"
            :current-page.sync="listQuery.pageIndex"
            :pager-count="7"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
        <print v-if="isShowprint" :formField="printdData" @detailClose="detailClose2" :isShow="isShowprint" />
      </div>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
  </section>
</template>
<script>
import request from "@/utils/request";
import Span from "../../../org/configurablePageManagement/comp/span.vue";
export default {
  components: {
    dialogHeader: () => import("@/components/dialogHeader"),
        print: () => import("./print")
    //弹窗标题
  },
  props: {
    isShow: { type: Boolean, default: false },
    rowData: { type: Object, default: {} }
  },
  data() {
    return {
      // 今天之前日期不可选
       pickerOptions0: {
      disabledDate(time) {
        return time.getTime() < Date.now() - 8.64e7;
        }
     },
       // 今天之前日期不可选
        pickerOptions1: {
      disabledDate(time) {
        return time.getTime() < Date.now() - 8.64e7;
        }
     },
        // 打印弹框的显示与隐藏
      isShowprint:false,

      // 查询条件
      listQuery: {
        pageIndex: 1,
        pageSize: this.$config.defaultPageSize
      },
      pageTotal: 0,
      // 显示加载中
      listLoading: false,
      // 是否显示
      showDialog: this.isShow,
      // 表格数据
      tableData: [],
      // 选中的数据
      checkTableList: [],
      detailLoading: null,
      calendar: ""
    };
  },
  created() {
    if (this.showDialog) {
      this.queryTable();
    }
  },
  methods: {
    detailClose2(){
  this.isShowprint = false
    },

    // 日期
    calendarChange() {
      // console.log(this.calendar);
      if (this.rowData.AUDIT_STATUS != "40") {
        this.tableData.forEach(item => {
          this.$set(item, "DELIVERY_TIME", this.calendar);
        });
      }
    },
    
    

    // 点击审核按钮
    confirm() {
      if (this.checkTableList.length > 0) {
        if (this.checkTableList.length !== this.tableData.length) {
          this.$message({
            message: "请选择所有行数据",
            type: "warn"
          });
          return false;
        }
        this.$confirm("确认要执行此操作吗？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消"
        }).then(() => {
            request({
              url: "/mp/wm/vl/warehouse/purchase/purchaseConfirm.do",
              method: "post",
              data: {
                PURCHASE_CODE: this.rowData.PURCHASE_CODE,
                AUDIT_STATUS: this.rowData.AUDIT_STATUS,
                UPDATE_CONTROL_ID: this.rowData.UPDATE_CONTROL_ID,
                Confirm: this.checkTableList
              }
            }).then(res => {
              if (res.result === "1") {
                this.$message({
                  message: "确认成功",
                  type: "success"
                });
                this.$emit("detailClose", true);
              } else {
                this.$message({
                  message: res.debugMsg ? res.debugMsg : res.msg,
                  type: "warn"
                });
              }
            });
          })
          .catch(err => {
            console.info(err);
          });
      } else {
        this.$message({
          message: "请选择一条数据"
        });
      }
    },
 
    

    // 点击确定关闭页面
    hiddenShow: function() {
      var that = this;
      that.cshow = false;
    },
    print(){
     
    },
    export(PURCHASE_D_ID,ids) {
      // 打印方法
      if (this.checkTableList.length <= 0) {
        this.$message({
          message: "请勾选一条数据",
          type: "wran",
          uration: 2000
        });
      } else {
        // console.log(this.checkTableList);
        this.printdData =  PURCHASE_D_ID
        this.isShowprint = true
      }
    },
    createJsBarcodeTop() {
      this.printData.forEach((item, index) => {
        setTimeout(() => {
          JsBarcode("#barcodeT" + index, item.ARRIVAL_CODE, {
            format: "CODE39",
            lineColor: "#000",
            background: "#fff",
            width: 1,
            height: 50,
            displayValue: true,
          });
        }, 50);
      });
      
    // }
      //    request({
      //   url: "/mp/wm/vl/warehouse/purchase/exportPurchaseD.do",
      //   method: "post",
      //   headers: {
      //     "Cache-Control": "no-cache, no-store,max-age=0, must-revalidate",
      //     Pragma: "no-cache",
      //     Expires: "0",
      //     "Content-Type": "application/json;charset=UTF-8"
      //   },
      //   responseType: "blob",
      //   data: {
      //     PURCHASE_D_IDS: PURCHASE_D_ID,
      //     PURCHASE_D_IDS_TWO: ids
      //   }
      // })
      //   .then(response => {
      //     let blob = new Blob([response], { type: "application/vnd.ms-excel" }); // 这里表示xmlx类型
      //     let downloadElement = document.createElement("a");
      //     let href = window.URL.createObjectURL(blob); // 创建下载的链接
      //     downloadElement.href = href;
      //     downloadElement.download = "采购单发货明细导出.xls"; // 下载后文件名
      //     document.body.appendChild(downloadElement);
      //     downloadElement.click(); // 点击下载
      //     document.body.removeChild(downloadElement); // 下载完成移除元素
      //     window.URL.revokeObjectURL(href); // 释放掉blob对象
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
    

    },
    save() {
       
      if (this.checkTableList.length > 0) {   
        
        this.detailLoading = this.$loading({
          lock: true,
          text: "正在发货...",
          background: "rgba(0, 0, 0, 0.7)",
          fullscreen: true
        });
        request({
          url: "/mp/wm/vl/warehouse/purchase/purchaseDeliverGoods.do",
          method: "post",
          data: {
            DeliverGoods: this.checkTableList
          }
        })
          .then(res => {
            this.detailLoading.close();
            if (res.result === "1") {
              this.$message({
                message: "发货成功",
                type: "success"
              });
              this.queryTable();
               let PURCHASE_D_ID = res.msg;
            var ids=[];
              for(var i=0;i<this.checkTableList.length;i++){
                if(this.checkTableList[i].PURCHASE_TYPE=='03') {
                    var a = this.checkTableList[i].PURCHASE_D_ID;
                    ids.push(a)
                }
              }
              if(res.msg!=""){
                this.export(PURCHASE_D_ID,ids.toString())
              } else {
                
              }
              
            } else {
              this.$message({
                message: res.debugMsg ? res.debugMsg : res.msg,
                type: "warn"
              });
            }
          })
          .catch(err => {
            this.detailLoading.close();
            console.info(err);
          });
      } else {
        this.$message({
          message: "请选择一条数据"
        });
      }
    },
    //  当选择项发生变化时会触发该事件
    onCheckSelectChange(selection) {
      this.checkTableList = selection;
    },
    // 发货数量change事件
    numChange(scope) {
      scope.row.ARRIVAL_QTY = (scope.row.ARRIVAL_QTY + "").replace(
        /[^\d]/g,
        ""
      );
      // let tmpObj = scope.row;
      // this.$set(this.tableData, index, tmpObj);
    },
    close() {
      this.showDialog = false;
      this.$emit("detailClose");
    },
    // 处理每页显示改变事件
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.queryTable();
    },
    // 当前页记录
    handleCurrentChange(val) {
      this.listQuery.pageIndex = val;
      this.queryTable();
    },
    queryTable() {
      let reqData = JSON.parse(JSON.stringify(this.listQuery));
      reqData.PURCHASE_CODE = this.rowData.PURCHASE_CODE;
      this.listLoading = true;
      request({
        url: "/mp/wm/vl/warehouse/purchase/queryPurchaseDConfirmBox.do",
        method: "post",
        data: reqData
      })
        .then(res => {
          this.listLoading = false;
          if (res.result === "1") {
            if (res.listRow) {
              this.tableData = res.listRow;
              // this.pageTotal = res.listResult.records;

              this.tableData.forEach(item => {
                if (!item.SHIPMENTS_STATUS_NAME) {
                  item.ARRIVAL_QTY = item.PURCHASE_QTY;
                }
              });
            } else {
              this.tableData = [];
              this.pageTotal = 0;
            }
          } else {
            if (res.msg || res.debugMsg) {
              this.$message({
                message: res.debugMsg ? res.debugMsg : res.msg,
                uration: 2000
              });
            }
          }
        })
        .catch(err => {
          console.info(err);
          this.listLoading = false;
        });
    }
  }
};
</script>
<style type="text/css" lang="scss" scoped>
.dialogTitle {
  text-align: left;
  overflow: hidden;
}
.dialogTitleButton {
  float: right;
}
.determineButton {
  margin-right: 7px;
  float: right;
}
.calender {
  background-color: red;
}
/deep/ .tableTemplate .el-input__inner {
  border: none;
}
</style>
